<template>
  <div class="bg-white p-6 rounded-2xl shadow-xl max-w-2xl">
    <!-- 标题 -->
    <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
      <svg class="w-6 h-6 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      视频处理控制台
    </h2>

    <!-- 颜色配置卡片 -->
    <div class="bg-gray-50 p-4 rounded-lg mb-6">
      <div class="grid grid-cols-2 gap-4 mb-4">
        <!-- 目标颜色 -->
        <div class="space-y-1">
          <label class="text-sm font-medium text-gray-700 block">目标颜色</label>
          <div class="flex items-center gap-2">
            <input type="color" v-model="store.colorHex"
              class="w-12 h-10 rounded-lg border-2 border-white shadow-sm cursor-pointer">
            <span class="font-mono text-sm text-gray-600">{{ store.colorHex }}</span>
          </div>
        </div>

        <!-- 预览背景 -->
        <div class="space-y-1">
          <label class="text-sm font-medium text-gray-700 block">预览背景</label>
          <div class="flex items-center gap-2">
            <input type="color" v-model="store.previewBgColor"
              class="w-12 h-10 rounded-lg border-2 border-white shadow-sm cursor-pointer">
            <span class="font-mono text-sm text-gray-600">{{ store.previewBgColor }}</span>
          </div>
        </div>
      </div>

      <!-- 透明通道 + 颜色阈值 -->
      <div class="flex flex-col gap-4">
        <!-- 透明通道设置 -->
        <div class="flex items-center space-x-2">
          <input type="checkbox" id="enableTransparency" v-model="store.enableTransparency"
            class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer">
          <label for="enableTransparency" class="text-sm font-medium text-gray-700 cursor-pointer">
            启用透明通道
          </label>
        </div>
        
        <!-- 颜色阈值设置 -->
        <div>
          <div class="flex items-center justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">颜色阈值</label>
            <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">
              {{ store.colorThreshold }}
            </span>
          </div>
          <input type="range" v-model.number="store.colorThreshold" min="1" max="255"
            class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500">
        </div>
      </div>
    </div>

    <!-- 时间控制卡片 -->
    <div class="bg-gray-50 p-4 rounded-lg mb-6">
      <div class="grid grid-cols-3 gap-4">
        <!-- 开始时间 -->
        <div>
          <label class="text-sm font-medium text-gray-700 block mb-1">开始时间 (s)</label>
          <input type="number" v-model.number="store.startTime"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500">
        </div>

        <!-- 结束时间 -->
        <div>
          <label class="text-sm font-medium text-gray-700 block mb-1">结束时间 (s)</label>
          <input type="number" v-model.number="store.endTime"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500">
        </div>

        <!-- 帧间隔 -->
        <div>
          <label class="text-sm font-medium text-gray-700 block mb-1">帧间隔 (ms)</label>
          <input type="number" v-model.number="store.frameInterval"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500">
        </div>
      </div>
    </div>

    <!-- 操作按钮组 -->
    <div class="grid grid-cols-3 gap-3">
      <button @click="previewFrame"
        class="py-3 bg-gradient-to-br from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-lg font-semibold shadow-md transition-all">
        预览当前帧
      </button>
      <button @click="togglePreview"
        class="py-3 bg-gradient-to-br from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white rounded-lg font-semibold shadow-md transition-all">
        {{ isPreviewPlaying ? '停止预览' : '播放预览' }}
      </button>
      <button @click="startProcessing"
        class="py-3 bg-gradient-to-br from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white rounded-lg font-semibold shadow-md transition-all">
        开始处理
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useVideoStore } from '../stores/videoStore';

// 使用 Pinia store
const store = useVideoStore();

// 本地状态
const isPreviewPlaying = ref(false);

// 计算属性
const maxTime = computed(() => {
  if (store.sourceVideo && store.sourceVideo.duration) {
    return store.sourceVideo.duration;
  }
  return 100; // 默认最大值
});

// 方法
const previewFrame = () => {
  emit('preview-frame');
};

const startProcessing = () => {
  // 如果正在预览播放，先停止预览
  if (isPreviewPlaying.value) {
    isPreviewPlaying.value = false;
    emit('toggle-preview', false);
  }
  
  // 延迟一点时间再开始处理，确保预览已完全停止
  setTimeout(() => {
    // 先重置进度条
    store.progressValue = 0;
    
    // 发送开始处理事件
    emit('start-processing');
    
    // 监听处理完成事件，确保进度条到达100%
    const checkProgress = setInterval(() => {
      if (store.statusMessage.includes('处理完成') || store.statusMessage.includes('导出')) {
        store.progressValue = 100;
        clearInterval(checkProgress);
      }
    }, 500);
    
    // 设置超时清除定时器
    setTimeout(() => {
      clearInterval(checkProgress);
    }, 60000); // 60秒后自动清除
  }, 100);
};

// 播放预览功能
const togglePreview = () => {
  isPreviewPlaying.value = !isPreviewPlaying.value;
  emit('toggle-preview', isPreviewPlaying.value);
};

// 定义事件
const emit = defineEmits(['preview-frame', 'start-processing', 'toggle-preview']);
</script>